<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        table {
            margin: 20px auto;
        }

        th,
        td {
            padding: 2px 10px;
        }

        .jian,
        .jia {
            padding: 0px 6px;
        }

        .count {
            width: 30px;
            text-align: center;
        }

        .del {
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="ckAll">全选</th>
                <th>商品名称</th>
                <th>商品图片</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <script id="shopping_temp" type="text/html">
            {{each $data item}}
            <tr>
                <td><input type="checkbox" class="ck"></td>
                <td>{{item.name}}</td>
                <td><img src="{{item.img}}"></td>
                <td class="price">{{item.price}}</td>
                <td>
                    <button class="jian">-</button>
                    <input type="text" value="{{item.count}}" class="count">
                    <button class="jia">+</button>
                </td>
                <td class='xj'>{{item.price*item.count}}</td>
                <td>
                    <button class="del">删除</button>
                    <input id="id" type="hidden" value="{{item.id}}">
                </td>
            </tr>
            {{/each}}
            </script>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="7" style="text-align: right;padding-right: 10px;">
                    <span>总计：</span>
                    <span id="totalprice">0</span>
                </td>
            </tr>
        </tfoot>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="./js/artTemplate.js"></script>
    <script>
        let goodsData = []  //定义一个数组，用于接收数据
        $.get('./data/goods.json', data => {
            goodsData = data
            let html = template('shopping_temp', data)
            $('tbody').append(html)
        })

        //全选复选框选中事件
        $('#ckAll').change(function () {
            //prop()方法，用于获取或设置表单元素的boolean值属性
            $('.ck').prop('checked', $(this).prop('checked'))
            totalprice();   //调用计算总计的方法
        })
        //单个复选框选中事件
        $('tbody').on('change', '.ck', function () {
            //过滤出所有选中的复选框
            let len = $('.ck').filter(function (index, item) {
                return $(item).prop('checked') === true
            }).length
            //如果选中的复习框的个数===数据的长度  就表示全选
            if (len === goodsData.length) {
                $('#ckAll').prop('checked', true)
            } else {
                $('#ckAll').prop('checked', false)
            }
            totalprice();   //调用计算总计的方法
        })

        //计算总计的方法
        function totalprice() {
            let totalprice = 0
            $('.ck').each(function (index, item) {
                if ($(item).prop('checked')) {
                    totalprice += parseFloat($(item).parents('tr').find('.xj').text())
                }
            })
            $('#totalprice').text(totalprice)
        }

        //减按钮点击事件
        $('tbody').on('click', '.jian', function () {
            let id = $(this).parents('tr').find('#id').val()  //获取id
            let price = parseFloat($(this).parents('tr').find('.price').text())  //获取单价
            let count = parseInt($(this).parents('tr').find('.count').val())     //获取数量
            count--
            if (count < 1) count = 1
            $(this).parents('tr').find('.count').val(count)   //更新数量
            
            goodsData.find(r=> r.id === id).count = count   //更新数组中的数据

            $(this).parents('tr').find('.xj').text(price * count)  //更新小计
            totalprice();   //更新总计
        });

        //加按钮点击事件
        $('tbody').on('click', '.jia', function () {
            let id = $(this).parents('tr').find('#id').val()  //获取id
            let price = parseFloat($(this).parents('tr').find('.price').text())  //获取单价
            let count = parseInt($(this).parents('tr').find('.count').val())     //获取数量
            count++
            $(this).parents('tr').find('.count').val(count)   //更新数量

            goodsData.find(r=> r.id === id).count = count   //更新数组中的数据

            $(this).parents('tr').find('.xj').text(price * count)  //更新小计
            totalprice();   //更新总计
        });

        //删除按钮点击事件
        $('tbody').on('click', '.del', function () {
            let id = $(this).parents('tr').find('#id').val()  //获取id
            $(this).parents('tr').remove()
            
            //删除数组中的数据
            goodsData.splice(goodsData.findIndex(r=>r.id===id),1)
           
            totalprice();   //更新总计
        })

    </script>
</body>

</html>